<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { updateWallSloganAPI } from '@/api/wall'
import { useCommonStore } from '@/stores'
const commonStore = useCommonStore()

// 刷新
const tableLoading = ref(false)
const handleRefresh = async () => {
  tableLoading.value = true
  try {
    await commonStore.getWallList()
  } finally {
    tableLoading.value = false
  }
}

// 修改墙的标语
const formRef = ref(null)
const dialogVisible = ref(false)
const btnLoading = ref(false)
const formRules = {
  slogan: [{ required: true, message: '请输入标语', trigger: 'blur' }]
}
const params = reactive({ id: 0, slogan: '' })
// 打开弹窗
const handleOpenDialog = (row) => {
  params.slogan = row.slogan
  params.id = row.id
  formRef.value?.resetFields()
  dialogVisible.value = true
}
// 提交数据
const handleUpdateSlogan = async () => {
  await formRef.value.validate(async (valid) => {
    if (!valid) return
    btnLoading.value = true
    try {
      await updateWallSloganAPI({ id: params.id, slogan: params.slogan })
      ElMessage.success('修改成功')
      dialogVisible.value = false
      handleRefresh()
    } finally {
      btnLoading.value = false
    }
  })
}

onMounted(() => {
  handleRefresh()
})
</script>

<template>
  <layout-card>
    <!-- 搜索区域 -->
    <el-form class="search-container" inline>
      <el-form-item class="search-btn">
        <el-button type="primary" icon="RefreshRight" @click="handleRefresh">刷新</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格区域 -->
    <el-table v-loading="tableLoading" :data="commonStore.wallList">
      <el-table-column label="id" prop="id" width="140" />
      <el-table-column label="标题" prop="title" />
      <el-table-column label="标语" prop="slogan" show-overflow-tooltip />
      <el-table-column label="创建时间" prop="created_time" />
      <el-table-column label="操作" fixed="right" width="140">
        <template #default="{ row }">
          <el-button
            v-permission="'wall:list:updateSlogan'"
            type="primary"
            link
            @click="handleOpenDialog(row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗 -->
    <el-dialog title="编辑标语" v-model="dialogVisible" align-center width="420px">
      <!-- 表单 -->
      <el-form class="dialog-form" ref="formRef" :model="params" :rules="formRules">
        <el-form-item label="标语" prop="slogan">
          <el-input v-model="params.slogan" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button :loading="btnLoading" type="primary" @click="handleUpdateSlogan"
          >确 定</el-button
        >
      </template>
    </el-dialog>
  </layout-card>
</template>

<style lang="scss" scoped>
.search-container {
  .el-form-item {
    margin-bottom: 10px;
    .select {
      width: 130px;
    }
    &.search-btn {
      margin-right: 0;
    }
  }
}
.dialog-form {
  padding: 10px 10px 0;
}
</style>
